<template>
  <view class="recommend">
    <view class="nav">
      <view>为您推荐</view>
      <view class="nav_rig" @click="toRecommend">
        <text>更多</text>
        <u-icon name="arrow-right" size="16"></u-icon>
      </view>
    </view>
    <RecommendInfoList />
    <view class="nav_video" v-for="item in list" :key="item.id">
      <view class="title">{{item.title}}</view>
      <view class="video" v-html="videoContent(item.video_url)"></view>
    </view>
    <view v-if="flag" class="isOver">----我是有底线的----</view>
  </view>
</template>

<script>
import RecommendInfoList from './recommend-info-list.vue'
export default {
  components: {
    RecommendInfoList
  },
  data() {
    return {
      list: [],
      recommend: 1,
      total: 0,
      flag: false
    }
  },
  mounted() {
    this.getList()
  },
  onReachBottom() {
    if(this.recommend >= this.total) {
      this.flag = true
      return
    }
    ++this.recommend
    this.getList()
  },
  methods: {
    async getList() {
      const {data} = await this.$axios({
        url: '/api/index/article',
        data: {
          recommend: this.recommend
        }
      })
      this.list = this.list.concat(data.list.data)
      this.total = data.list.total
    },
    videoContent(videoSrc) {
      return `<video controls src="${videoSrc}" style="width:100%;"></video>`
    },
    toRecommend() {
      uni.navigateTo({
        url: '/pages/home/recommend-info-list'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.nav{
  margin: 20rpx 20rpx 10rpx 20rpx;
  display: flex;
  justify-content: space-between;
  .nav_rig{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.nav_video{
  margin: 0 20rpx;
  .title{
    color: #383838;
  }
  .video{
    z-index: 2;
    video{
      width: 710rpx;
      height: 260rpx;
      z-index: 2;
    }
  }
}
.isOver{
  text-align: center;
  line-height: 100rpx;
}
</style>